<template>
	<el-drawer
		v-model="drawerVisible"
		:title="title"
		size="80%"
		:destroy-on-close="true"
		@close="handleClose"
	>
		<!-- Tab切换 -->
		<el-tabs v-model="activeTab" class="px-4 pt-2">
			<el-tab-pane label="车辆运单统计" name="statistics">
				<!-- 搜索区域 -->
				<div class="mb-4 flex justify-between items-center">
					<div class="w-100">
						<BasicTableFrom :formList="formList" @search="handleSearch">
						</BasicTableFrom>
					</div>
					<div>
						<el-radio-group v-model="viewMode" size="small">
							<el-radio-button label="chart">图表</el-radio-button>
							<el-radio-button label="table">列表</el-radio-button>
						</el-radio-group>
					</div>
				</div>

				<!-- 图表视图 -->
				<div v-show="viewMode === 'chart'" class="h-[calc(100vh-280px)]">
					<div ref="chartRef" class="w-full h-full"></div>
				</div>

				<!-- 表格视图 -->
				<div
					v-show="viewMode === 'table'"
					class="h-[calc(100vh-280px)] overflow-auto"
				>
					<BasicTable
						:data="tableData"
						:option="tableColumns"
						:table-loading="loading"
						:show-summary="true"
						:summary-method="getSummaries"
					/>
				</div>
			</el-tab-pane>

			<el-tab-pane label="运单列表" name="list">
				<TripListDrawer
					v-if="activeTab === 'list'"
					v-model="showTripList"
					:fleet-info="fleetInfo"
					:is-inner="true"
				/>
			</el-tab-pane>
		</el-tabs>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import TripListDrawer from './TripListDrawer.vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	fleetInfo: {
		type: Object,
		default: () => ({}),
	},
});

const emit = defineEmits(['update:modelValue']);

const drawerVisible = ref(false);
const loading = ref(false);
const viewMode = ref('chart');
const chartRef = ref();
const activeTab = ref('statistics');
const showTripList = ref(true);

// 搜索表单配置
const formList = computed(() => [
	{
		key: 'timeRange',
		type: 'datetimerange',
		label: '运单时段:',
		placeholder: '请选择时段',
		clearable: true,
		width: '200px',
		props: {
			type: 'daterange',
			startPlaceholder: '开始日期',
			endPlaceholder: '结束日期',
		},
	},
]);

// 计算标题
const title = computed(() => {
	return `${props.fleetInfo?.fleetName || ''} - 运单统计`;
});

// 表格配置
const tableColumns = {
	showOverflowTooltip: true,
	border: true,
	menu: false,
	column: [
		{ type: 'index', label: '序号', width: 60, align: 'center' },
		{ prop: 'plateNumber', label: '车牌号', minWidth: 120 },
		{ prop: 'driverName', label: '司机', minWidth: 100 },
		{ prop: 'tripCount', label: '运单数', minWidth: 100 },
	],
};

// 模拟表格数据
const tableData = ref([
	{
		plateNumber: '川A11111D',
		driverName: 'XXXX',
		tripCount: 100,
	},
	{
		plateNumber: '川A22222D',
		driverName: 'XXXX',
		tripCount: 90,
	},
]);

// 图表数据
const chartData = {
	plateNumbers: [
		'川A11111D',
		'川A11111D',
		'川A1111D',
		'川A11111D',
		'川A1111D',
		'川A1111D',
		'川A11111D',
	],
	values: [100, 90, 80, 70, 60, 50, 40],
};

// 初始化图表
const initChart = () => {
	if (!chartRef.value) return;

	const chart = echarts.init(chartRef.value);
	const option = {
		grid: {
			left: 100,
			right: 20,
			top: 20,
			bottom: 20,
		},
		xAxis: {
			type: 'value',
			splitLine: {
				show: false,
			},
		},
		yAxis: {
			type: 'category',
			data: chartData.plateNumbers,
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
		},
		series: [
			{
				type: 'bar',
				data: chartData.values,
				itemStyle: {
					color: '#409EFF',
				},
				barWidth: 20,
			},
		],
	};

	chart.setOption(option);
};

// 合计方法
const getSummaries = (param) => {
	const { columns, data } = param;
	const sums = [];
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = '合计';
			return;
		}
		if (column.property === 'tripCount') {
			const values = data.map((item) => Number(item[column.property]));
			sums[index] = `${values.reduce((prev, curr) => prev + curr, 0)}`;
		} else {
			sums[index] = '';
		}
	});
	return sums;
};

// 监听抽屉显示状态
watch(
	() => props.modelValue,
	(val) => {
		drawerVisible.value = val;
		if (val) {
			loadData();
			nextTick(() => {
				if (viewMode.value === 'chart') {
					initChart();
				}
			});
		}
	},
);

// 监听视图模式变化
watch(viewMode, (val) => {
	if (val === 'chart') {
		nextTick(() => {
			initChart();
		});
	}
});

// 监听抽屉关闭
watch(drawerVisible, (val) => {
	emit('update:modelValue', val);
});

// 加载数据
const loadData = () => {
	loading.value = true;
	// TODO: 这里调用接口获取数据
	setTimeout(() => {
		loading.value = false;
	}, 500);
};

// 搜索
const handleSearch = (data) => {
	console.log('Search with:', data);
	loadData();
};

// 关闭抽屉
const handleClose = () => {
	drawerVisible.value = false;
	viewMode.value = 'chart';
	activeTab.value = 'statistics';
	showTripList.value = false;
};

onMounted(() => {
	if (drawerVisible.value && viewMode.value === 'chart') {
		nextTick(() => {
			initChart();
		});
	}
});
</script>

<style scoped>
.el-drawer__header {
	margin-bottom: 0;
}

:deep(.el-tabs__nav-wrap) {
	padding: 0 1rem;
}

:deep(.el-drawer__body) {
	padding: 0;
}

:deep(.el-tabs__content) {
	padding: 0 1rem;
	height: calc(100vh - 120px);
	overflow: auto;
}
</style>
